<template>
  <a-card title="会员管理">
    <!-- 搜索框 -->
    <a-input-search
      v-model:value="searchKeyword"
      placeholder="输入会员姓名或联系方式搜索"
      @search="handleSearch"
      style="margin-bottom: 16px"
    >
      <template #suffix>
        <a-icon
          v-if="searchKeyword"
          type="close-circle"
          @click="clearSearch"
          style="cursor: pointer"
        />
      </template>
    </a-input-search>
    <!-- 刷新按钮 -->
    <a-button @click="handleRefresh" style="margin-bottom: 16px"
      >刷新数据</a-button
    >
    <!-- 正常显示表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :pagination="pagination"
      @change="handleTableChange"
      :row-key="(record) => record.id"
    >
      <template #action="{ record }">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" danger @click="confirmDelete(record.id)"
          >删除</a-button
        >
      </template>
    </a-table>
    <!-- 添加会员模态框 -->
    <a-modal
      :visible="addModalVisible"
      title="添加会员"
      @ok="handleAddMemberOk"
      @cancel="handleAddMemberCancel"
    >
      <a-form :form="addMemberForm" layout="vertical">
        <a-form-item
          label="会员姓名"
          :rules="[{ required: true, message: '请输入会员姓名' }]"
        >
          <a-input v-model="addMemberFormState.name" />
        </a-form-item>
        <a-form-item
          label="联系方式"
          :rules="[{ required: true, message: '请输入联系方式' }]"
        >
          <a-input v-model="addMemberFormState.phone" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { ref, reactive } from "vue";
import { message, confirm } from "ant-design-vue";

export default {
  setup() {
    const data = ref([
      { id: 1, name: "会员1", phone: "13800138000" },
      { id: 2, name: "会员2", phone: "13900139000" },
      { id: 3, name: "会员3", phone: "13700137000" },
    ]);

    const pagination = ref({ pageSize: 10, current: 1 });
    const searchKeyword = ref("");
    const addModalVisible = ref(false);
    const addMemberForm = ref();
    const addMemberFormState = reactive({
      name: "",
      phone: "",
    });

    const columns = ref([
      { title: "会员姓名", dataIndex: "name", key: "name" },
      { title: "联系方式", dataIndex: "phone", key: "phone" },
      {
        title: "操作",
        key: "action",
        slots: { customRender: "action" },
      },
    ]);

    const filteredData = ref(data.value);

    // 处理刷新
    const handleRefresh = () => {
      searchKeyword.value = "";
      filteredData.value = data.value;
    };

    // 处理搜索
    const handleSearch = () => {
      filteredData.value = data.value.filter(
        (item) =>
          item.name.includes(searchKeyword.value) ||
          item.phone.includes(searchKeyword.value)
      );
    };

    // 清除搜索内容
    const clearSearch = () => {
      searchKeyword.value = "";
      filteredData.value = data.value;
    };

    // 编辑会员信息
    const handleEdit = (record) => {
      // 可添加编辑逻辑
    };

    // 删除会员信息
    const confirmDelete = (id) => {
      confirm({
        title: "确定要删除该会员吗？",
        content: "删除后将无法恢复，请谨慎操作。",
        onOk() {
          data.value = data.value.filter((item) => item.id !== id);
          filteredData.value = filteredData.value.filter(
            (item) => item.id !== id
          );
          message.success("会员删除成功");
        },
        onCancel() {},
      });
    };

    // 显示添加会员模态框
    const showAddMemberModal = () => {
      addModalVisible.value = true;
    };

    // 处理添加会员确认
    const handleAddMemberOk = () => {
      const newMember = {
        id: data.value.length + 1,
        ...addMemberFormState,
      };
      data.value.push(newMember);
      filteredData.value = data.value;
      addModalVisible.value = false;
      addMemberForm.value?.resetFields();
      message.success("会员添加成功");
    };

    // 处理添加会员取消
    const handleAddMemberCancel = () => {
      addModalVisible.value = false;
      addMemberForm.value?.resetFields();
    };

    return {
      columns,
      filteredData,
      pagination,
      searchKeyword,
      addModalVisible,
      addMemberForm,
      addMemberFormState,
      handleRefresh,
      handleSearch,
      clearSearch,
      handleEdit,
      confirmDelete,
      showAddMemberModal,
      handleAddMemberOk,
      handleAddMemberCancel,
    };
  },
};
</script>
